<template>
  <view class="container">
    <view class="background-wrap">
      <image class="bg-image" src="/static/images/ic_mine_bg.png" mode="aspectFill" />
    </view>

    <image class="close-button" @click="closePage" src="/static/images/ic_login_nav_close.png"
           :style="{marginTop: statusBarHeight + 'px'}"></image>

    <text class="title">{{title}}</text>

    <view class="content-container">
      <view class="input-container">
        <view style="padding:40rpx 32rpx;">已绑定手机：{{phoneNumber}}</view>
      </view>

      <view class="input-container">
        <watch-input v-model="smsCode" type="number" maxlength="6" setTime="60" placeholder="验证码" isShowCode
                     ref="runCode" @setCode="getCode()"></watch-input>
      </view>

      <view class="input-container">
        <watch-input v-model="newPassword" type="password" maxlength="11" placeholder="密码"
                     isShowPass="true"></watch-input>
      </view>

      <view class="input-container">
        <watch-input v-model="confirmPassword" type="password" maxlength="11" placeholder="确认密码"
                     isShowPass="true"></watch-input>
      </view>

      <text class="password-hint" @click="goToForgetPassword">密码由6-20位字母、数字或者符号两种或以上组成</text>

      <view class="login-button" @click="handleSubmit">
        提交
      </view>

    </view>
  </view>
</template>

<script>
export default {
  onLoad() {
    this.phoneNumber = this.$app.getUserMobile();
    this.title = this.$app.isSetFundPassWord() ? '忘记交易密码' : '设置交易密码';
  },
  data() {
    return {
      title: '', //标题
      phoneNumber: '',
      smsCode: '', // 验证码
      newPassword: '', // 新密码
      confirmPassword: '', // 确认密码
      isShowNewPass: false,
      isShowConPass: false,
      isRotate: false, //是否加载旋转
      statusBarHeight: 20
    }
  },
  created() {
    // 获取系统信息
    const systemInfo = uni.getSystemInfoSync()
    //获取状态栏高度
    this.statusBarHeight = systemInfo.statusBarHeight
  },
  methods: {
    closePage() {
      // 关闭页面
      uni.navigateBack();
    },
    // 发送验证码
    async getCode() {
      const res = await this.$http({
        method: 'GET',
        url: '/user/pwd/captcha',
        data: {
          pwdType: 2
        }
      });
      if(res){
        console.log('验证码发送成功:', res);
        this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用
      }
    },
    // 提交处理
    async handleSubmit() {
      if (this.isRotate) {
        //判断是否加载中，避免重复点击请求
        return false;
      }

      if (!this.smsCode) {
        uni.showToast({
          title: '验证码不能为空',
          position: 'bottom',
          icon: 'none'
        });
        return false;
      }

      if (!this.newPassword) {
        uni.showToast({
          title: '密码不能为空',
          position: 'bottom',
          icon: 'none'
        });
        return false;
      }

      const pwdReg = /^(?=.*[a-zA-Z])(?=.*\d|.*[^a-zA-Z\d]).{6,20}$/;
      if (!pwdReg.test(this.newPassword)) {
        uni.showToast({
          title: '密码需包含字母+数字/符号，长度6-20位',
          position: 'bottom',
          icon: 'none'
        });
        return false;
      }

      if (!this.confirmPassword) {
        uni.showToast({
          title: '确认密码不能为空',
          position: 'bottom',
          icon: 'none'
        });
        return false;
      }

      if (this.newPassword !== this.confirmPassword) {
        return uni.showToast({
          title: '两次密码不一致',
          icon: 'none'
        });
        return false;
      }

      this.isRotate = true;
      const res = await this.$http({
        method: 'POST',
        url: '/user/pwd/update',
        data: {
          captcha: this.smsCode,
          password: this.newPassword,
          pwdType: 2
        }
      });
      if (res) {
        uni.navigateBack();
        this.$app.toast("修改成功！")
      }else{
        this.isRotate = false;
      }
    },
    setIsShowNewPass() {
      this.isShowNewPass = !this.isShowNewPass
    },
    setIsShowConPass() {
      this.isShowConPass = !this.isShowConPass
    }
  }
}
</script>

<style lang="scss">
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

}

/* 背景图容器 */
.background-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 616rpx;
  /* 控制背景图高度为 Banner 的一半 */
  z-index: 0;
  /* 确保背景图在 Banner 下方 */

  .bg-image {
    width: 100%;
    height: 100%;
  }
}

.close-button {
  width: 68rpx;
  height: 68rpx;
  margin-left: 30rpx;
}

.title {
  z-index: 1;
  font-size: 44rpx;
  font-weight: bold;
  margin-bottom: 46rpx;
  margin-top: 100rpx;
  margin-left: 50rpx;
}

.content-container {
  background-color: white;
  border-radius: 36rpx;
  padding: 52rpx 32rpx;
  width: calc(100% - 84rpx);
  margin: 0 42rpx;
  z-index: 9999;
}

.input-container {
  z-index: 1;
  width: 100%;
  background-color: #F2F9FF;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
}

.password-hint {
  color: #4D7EF4;
  font-size: 24rpx;
  margin: 30rpx 0;
}

.login-button {
  margin-top: 120rpx;
  box-sizing: content-box;
  background-color: #4D7EF4;
  padding: 22rpx;
  text-align: center;
  font-size: 28rpx;
  color: white;
  border-radius: 8rpx;
}
</style>